<template>
  <div>
  <div class="wrap">
    <div class="main-container">
      <!-- 主要内容放在这里 -->
      <h3>&lt;古道寻踪 中亚五国深度精华18日&gt;</h3>
      <div class="mesg_box">
        <p>
        <span>
          行程名称：
          <em style="font-style: normal">（古道寻踪）中亚五国深度精华18日 【商品编号：TS2400078550】</em>
        </span>
        </p>
        <span>
          出发城市：<em style="font-style: normal">北京</em>
        </span>

        <span>
          出发日期：<em style="font-style: normal">2024-05-20</em>
        </span>

        <span>
          出行人数：<em style="font-style: normal">1成人</em>
        </span>
      </div>
      <div style="width: 50px;margin-top: 15px;font-size: 14px;color:#666;padding: 10px;">
        单房差
      </div>
      <ul class="supplement">
        <li class="supplement_tit">
          <span>名称</span>
          <span>单价</span>
          <span>单位</span>
          <span>数量</span>
          <span>总价</span>
        </li>
        <li class="supplement_text">
          <span>单房间差</span>
          <span>¥4600.00</span>
          <span>元/人</span>
          <span><el-input-number v-model="num" :min="0" :max="10" @change="handleChange" style="width:100px"/></span>
          <span style="color: #ea1a56">¥0.00</span>
        </li>
      </ul>
    </div>
    <div class="order_nav">
      <h1>联系人信息</h1>
      <div class="order_pay_nav">
        <div class="meg-person">
          <b><span style="color: #ea1a56">*</span>
            姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</b>
          <input type="text" placeholder="请输入姓名">
        </div>
        <div class="meg-person tel error">
          <b><span style="color: #ea1a56">*</span>
            手机号码</b>
          <input type="text" placeholder="请输入手机号码">
        </div>

        <div class="meg-person">
          <b>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</b>
          <input type="text" placeholder="请输入邮箱">
        </div>

        <div class="meg-person">
          <b>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</b>
          <textarea placeholder="请备注您对产品的其他要求"></textarea>
        </div>
      </div>
    </div>
    <div class="order_nav">
      <h1>
        出游人信息
      <span>为了更好的帮您完成行程预订，建议您可以填写出游人或稍后在“我的悠哉-我的订单”中补充出游人信息</span>
      </h1>
      <div class="order_pay_nav">
        <ul class="linkman">
         <li></li>
        </ul>
        <div class="people_list">
          <h2 class="visitor">
            <b>
              <span class="span1">出游人1</span>
              <span class="span2">成人</span>
            </b>
            <em class="clearall" @click="clearData">
              <el-icon style="top: 2px"><Delete /></el-icon>
              清空
            </em>
            <span class="travel_user fr">
              <el-icon style="top: 2px"><FolderChecked /></el-icon>
              存为常用联系人
            </span>
          </h2>
          <div class="meg-person">
            <b><span style="color: #ea1a56">*</span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</b>
            <input type="text" placeholder="请输入姓名">
          </div>
          <div class="meg-person tel">
            <b>手机号码</b>
            <input type="text" placeholder="请输入11位手机号码">
          </div>
          <div class="meg-person">
            <b>证件类型</b>
            <select name="" id="" class="selection">
              <option value="" selected>请选择</option>
              <option value="">护照</option>
              <option value="">港澳通行证</option>
              <option value="">台湾通行证</option>
              <option value="">台胞证</option>
              <option value="">回乡证</option>
            </select>
            <input type="text" class="user_num" placeholder="请输入证件号码">
          </div>
          <div class="meg-person">
            <b><span style="color: #ea1a56">*</span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</b>
            <div class="select_sex">
              <el-radio-group v-model="gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </div>
            <div class="meg-person">
              <b><span style="color: #ea1a56">*</span>出生日期</b>
              <input type="date" placeholder="请选择出生日期">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="order_nav">
      <h1>
        优惠方案
        <span>若您在下单后对出游时间或出游人数进行变更，将可能无法享受促销优惠。</span>
      </h1>
      <div class="order_pay_nav preferential">
        <span class="btn_avtive on">
          优惠活动
        </span>
      </div>
      <div class="order_pay_nav coupon">
        <span >优惠券</span>
      </div>
      <div class="order_pay_nav point">
        <span>
          积分
        </span>
      </div>
    </div>
    <div class="order_nav">
      <h1>
        服务门店
      <span>
        请选择离您最近的服务门店提交旅客资料。如您附近无门店，请选择我们的客服中心。
      </span>
      </h1>
      <div class="order_pay_nav">
        <div class="address">
          <a href="">
            <el-icon><LocationFilled /></el-icon>
            <span>选择门店</span>
          </a>
          <div>
            <b>
              地址：
              <span>
              北京市朝阳区朝阳公园路8号（朝阳公园西二门）
            </span>
            </b>
            <b>
              电话：
              <span>
                1010 9898
              </span>
            </b>
            <b>
              服务时间：
              <span>
                09:00-21:00
              </span>
            </b>
          </div>
        </div>
      </div>
    </div>
    <div class="back_wrap">
      <a href="" class="pay_tips pay_co">&lt;返回上一步</a>
    </div>
    <div class="order_submit_nav clear">
      <div class="pay_tips">
        <i class="iconfont icon-xuanzhong agree"></i>
        我已阅读并知悉以下旅游合同、费用包含、预定须知、温馨提示、自费项目等所有相关内容,同意签署下列旅游合同。
      </div>
      <div>
        <el-button class="go_pay" type="danger">
          <a href="http://localhost:9090/booking/paymode" style="text-decoration: none;color: #fff">去付款吧</a>
        </el-button>
      </div>
    </div>
    <div class="order_nav order_nav_ht">
      <h2>
        <a href="#c1" class="light">旅游合同</a>
        <a href="#c2">费用说明</a>
        <a href="#c3">服务标准</a>
        <a href="#c4">预定须知</a>
      </h2>
      <div class="text_content">
        <div class="text_list">
          <h4 class="main_tit" id="c1">
            ·旅游合同
          </h4>
          <iframe src="/html/hetong.html" style="width: 100%; min-height: 500px; height: 21585px;" id="contractFrame" frameborder="0" scrolling="no" height="631"></iframe>
        </div>
        <div class="text_list">
          <h4 class="main_tit" id="c2">
            ·费用说明
          </h4>
          <h6 class="main_sm_title">服务项目：</h6>
          <div class="text_cont">
            <p>一． 费用包含项目</p>
            <p>1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 国际往返机票及美洲境内段机票（经济舱、含机场税）；</p>
            <p>2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 中文领队兼导游服务；</p>
            <p>3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 境外服务费；</p>
            <p>4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 境外段行李托运费；</p>
            <p>5.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 行程内所示境外旅游巴士（每人一正座）；</p>
            <p>6.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 行程内所示景点首道门票；</p>
            <p>7.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 行程内所示的早，午，晚餐；特色餐；早餐为酒店内、外或打包早餐（简餐或快餐）；</p>
            <p>8.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 行程内所标明的酒店或*酒店，双人标准间酒店住宿；</p>
            <p>9.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 出境旅游境外意外伤害保险。</p>
            <p>&nbsp;</p>
          </div>
          <h6 class="main_sm_title">不含项目：</h6>
          <div class="text_cont">
            <p>一． 费用不含项目</p>
            <p>1.&nbsp;&nbsp;&nbsp; 美国签证费；</p>
            <p>2.&nbsp;&nbsp;&nbsp; 护照费、申请签证中准备相关材料所需的制作、手续费，如未成年人所需的公证书、认证费；</p>
            <p>3.&nbsp;&nbsp;&nbsp; 美国EVUS（签证更新电子系统）费用 ;</p>
            <p>4.&nbsp;&nbsp;&nbsp; 超出免费托运行李标准的费用，行李在航班托运期间所造成损坏的经济损失和责任；</p>
            <p>5.&nbsp;&nbsp;&nbsp; 一切因个人原因所产生的费用，包括滞留，违法，通讯，机场和酒店行李搬运服务，以及自由活动期间的餐食和交通费；</p>
            <p>6.&nbsp;&nbsp;&nbsp; 由恶劣天气引起或间接性导致交通（航班，车辆，船只)的延误或故障，及由此发生的行程变更产生的经济损失和责任；</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
          </div>
          <h6 class="main_sm_title">购物补充说明：</h6>
          <div class="text_cont">
            <p>1.&nbsp;&nbsp; 根据*公告2010年第54号文件，进境居民旅客携带在境外获取的个人自用进境物品，总值在5000</p>
            <p>4.&nbsp;&nbsp; 根据中国《*公告2004年第7号》，20种不予免税的商品分别为：电视机、摄像机、录像机、</p>
          </div>
          <h6 class="main_sm_title">购物补充说明：</h6>
          <div class="text_cont">
            <p>1.&nbsp;&nbsp; 根据*公告2010年第54号文件，进境居民旅客携带在境外获取的个人自用进境物品，总值在5000</p>
            <p>4.&nbsp;&nbsp; 根据中国《*公告2004年第7号》，20种不予免税的商品分别为：电视机、摄像机、录像机、</p>
          </div>
          <h6 class="main_sm_title">自费项目补充说明：</h6>
          <div class="text_cont">
            <p>2.&nbsp;&nbsp; 旅游者根据自身需要和个人意志，自主、自愿参加附件所列活动，旅行社绝不强迫。</p>
            <p>3.&nbsp;&nbsp; 如旅游者不参加附件所列活动的，将根据行程安排的内容进行活动；如旅游者参加附件所列活动的，须在境外书面签署附件并交予领队。</p>
            <p>4.&nbsp;&nbsp; 如旅游者不书面签署附件、或以口头形式确认的，旅行社视为旅游者不同意参加行程外活动，旅游者将根据行程安排的内容进行活动。</p>
          </div>
        </div>

        <div class="text_list">
          <h4 class="main_tit" id="c3">
            ·服务标准
          </h4>
          <h6 class="main_sm_title">服务标准说明：</h6>
          <div class="text_cont">
            <p>1.&nbsp;&nbsp; 景点说明：行程中未标注&amp;ldquo;入内参观&amp;rdquo;的景点均为游览外观；入内参观景点均含门票；</p>
            <p>2.&nbsp;&nbsp; 行程说明：</p>
            <p>（2）&nbsp;&nbsp; 行程景点实际游览*短时间，以行程中标注时间为准；</p>
            <p>3.&nbsp;&nbsp; 酒店标准：</p>
            <p>（1）&nbsp;&nbsp; 美洲不同的国家有不同的酒店*评判标准，大部分酒店没有*的挂牌，但是这类酒店都具备等同于行程中指定同*酒店的设施标准和接待能力；</p>
            <p>（2）&nbsp;&nbsp; 早餐为美式早餐，多为冷早餐；形式多为酒店外早餐或打包早餐（简餐或快餐）</p>
            <p>4.&nbsp;&nbsp; 退税说明：美国购物无退税，建议在机场免税店和其他正规免税店购物。</p>
            <p>5.&nbsp;&nbsp; 保险说明：</p>
            <p>（3）&nbsp;&nbsp; 我社推荐客人根据自身情况额外补上*50万或70万的大额保险。</p>
            <p>6.&nbsp;&nbsp; 退费说明：</p>
            <p>（1）&nbsp;&nbsp; 如遇天气、战争、罢工、地震等人力不可抗力因素无法游览，我社将按照旅行社协议，退还未游览景点门票费用，但赠送项目费用不退；</p>
            <p>（2）&nbsp;&nbsp; 游客因个人原因临时自愿放弃游览，酒店住宿、餐、车等费用均不退还；</p>
            <p>7.&nbsp;&nbsp; 补费说明：</p>
            <p>（1）&nbsp;&nbsp; 如遇航空公司政策性调整机票价格，请按规定补交差价。机票价格为团队机票，不得改签换人退票；</p>
            <p>（2）&nbsp;&nbsp; 如果旅游目的地国家政策性调整门票或其他相关价格，请按规定补交差价；</p>
          </div>
        </div>

        <div class="text_list">
          <h4 class="main_tit" id="c4">
            ·预定须知
          </h4>
          <h6 class="main_sm_title">温馨提示：</h6>
          <div class="text_cont">
            <p>2.&nbsp;&nbsp; 行程中所列航班号及时间仅供参考，将根据实际情况做出合理的调整；</p>
            <p>3.&nbsp;&nbsp; 美国共有5个时区（均以当地到达时间为准）；</p>
            <p>4.&nbsp;&nbsp; 行程中所注明的城市间距离，参照境外地图，仅供参考，视当地交通状况进行调整；</p>
            <p>5.&nbsp;&nbsp; 根据美国法律规定，导游和司机每天工作时间不得超过10小时；</p>
            <p>6.&nbsp;&nbsp; 请您在境外期间遵守当地的法律法规，以及注意自己的人身安全；</p>
            <p>7.&nbsp;&nbsp; 此参考行程和旅游费用，我公司将根据参团人数、航班、签证及目的地国临时变化保留调整的权利；</p>
            <p>8.&nbsp;&nbsp; 依照旅游业现行作业规定，本公司有权依据*出团人数情况，调整房间分房情况。</p>
            <p>10.&nbsp; 全程机票为团队票，任意一段放弃，后续段将自动取消。不退还任何费用。</p>
            <p>11.&nbsp; 全程任意一段机票均不可退、改、签。</p>
            <p>12.&nbsp; 全程任意一段机票都无法提前确认座位号。</p>
            <p>13.&nbsp; 出境时如有贵重物品请及时申报。（请咨询申报处何种物品需要申报）</p>
            <p>14.&nbsp; 在境外购买物品请按相关规定及时申报，所产生的相应费用需自行承担。</p>
            <p>15.&nbsp; 由于行程紧凑，旅途较疲劳，65岁以上老人建议提供健康证明并自行增加高额保险。</p>
            <p>16.&nbsp; 境外酒店内禁止吸烟（包括阳台）。如违反罚款由客人自行承担。</p>
            <p>17.&nbsp; 境内段航班不安排餐食。</p>
            <p>19.&nbsp; 美国国土安全局拥有开箱检查入境行李的权力，请您的行李上不要上锁，以免造成锁头被</p>
            <p>20.&nbsp; 撬、行李箱受损。如您的物品在开箱检查中丢失，我社不承担任何责任。</p>
            <p>21.&nbsp; 由于航空公司原因或不抗力导致航班临时出现调整，我社将不承担任何责任。</p>
            <p>22.&nbsp; 行李在航空公司托运期间造成的损坏或遗失，我社不承担任何责任。我社可协助游客与航空公司进行交涉，但处理结果一律按照航空公司相关规定办理。</p>
            <p>23.&nbsp; 出门旅行，衣服应该以轻便和多用途为主。准备衣物要根据季节变化而定；请务必带件保暖外衣；建议客人出发前收看或收听国际气象预报；</p>
            <p>24.&nbsp; 游客责任：</p>
            <p>a)&nbsp;&nbsp; 此团是集体活动，集体出发、集体返回，请遵守时间，任何人不得逾期或滞留不归；</p>
            <p>b)&nbsp;&nbsp; 参团旅客，所持护照均为自备因私护照，出入境如遇到因护照引起的问题而影响行程，由此引起的一切损失（包括团费），均由客人自负。</p>
            <p>c)&nbsp;&nbsp; 如客人不参加我公司的赠送项目，用餐、门票等费用不退。</p>
            <p>d)&nbsp;&nbsp; 旅游期间遇到特殊情况如交通，天气等旅行社认为不可控原因，本公司有权增减或更改某些行程和旅游项目；</p>
            <p>e)&nbsp;&nbsp; 由于不可抗拒的原因，如政变、罢工、水灾地震、交通意外等所引起的旅游天数和费用的增加，本公司将按实际情况向旅客予以收费。</p>
            <p>f)&nbsp;&nbsp; 请自备签证和境外参团的客人自行检查签证是否符合本行程的要求，若因自身原因不能按时参团，本社概不负责；</p>
            <p>g)&nbsp;&nbsp; 所有由我社办理签证的客人回国后需将护照、返程登机牌交于领队，待登记和复印后退还客人。</p>
            <p>&nbsp;</p>
          </div>
          <h6 class="main_sm_title">温馨提示：</h6>
          <div class="text_cont">
            <p>《中国公民出境旅游文明公约》</p>
            <p>中国公民，出境旅游，注重礼仪，保持尊严。讲究卫生，爱护环境；衣着得体，请勿喧哗。<br />
              尊老爱幼，助人为乐；女士优先，礼貌谦让。出行办事，遵守时间；排队有序，不越黄线。<br />
              文明住宿，不损用品；安静用餐，请勿浪费。健康娱乐，有益身心；*博色情，坚决拒绝。<br />
              参观游览，遵守规定；习俗禁忌，切勿冒犯。遇有疑难，咨询领馆；文明出行，一路平安。</p>
            <p>
              <br />
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="reserve_r">
    <h1 style="font-size: 16px;margin-bottom: 20px;font-weight: 400;"><el-icon style="top: 2px"><List /></el-icon>费用明细</h1>
    <h2 style="font-size: 14px;margin: 25px auto 8px;height: 20px;font-weight: 400;">
      <span>旅游团费</span>
      <span style="float: right;color: #ea1a56;">¥66800</span>
    </h2>
    <p style="color: #999;font-size: 12px;height: 25px;">
      <span>1成人 &nbsp;x &nbsp;¥66800.0</span>
      <span style="float: right">¥66800</span>
    </p>
    <div>总计<em style="color: #ea1a56;font-style: normal;font-size: 12px">¥</em>
      <span style="color: #ea1a56;font-size: 26px">66800</span>
    </div>
  </div>
  </div>

</template>

<script setup>
import { ref } from 'vue'

const gender = ref('1')

const num = ref(0)
const handleChange = (value) => {
  console.log(value);
}
</script>


<style scoped>

.reserve_r div{
  font-size: 14px;
  text-align: right;
  margin-top: 20px;
  color: #999;
}


.reserve_r{
  float: right;
  margin-top: 20px;
  margin-left: 20px;
  width: 250px;
  background: #fff;
  padding: 20px;
}




.text_content p{
  font-size: 12px;
  color: #666;
  line-height: 24px;
}

.main_sm_title{
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

.main_tit{
  color: #ea1a56 !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  margin: 0;
}



.text_content {
  max-height: 600px;
  min-width: 100px;
  overflow: auto;
}
.order_nav .light{
  display: inline-block;
  padding: 8px 20px;
  background: #ea1a56;
  color: #fff;
  cursor: pointer;
  text-align: center;
  border-radius: 40px;
  font-size: 14px;
  text-decoration: none;
}

.order_nav_ht a{
  color: #666;
  padding: 8px 20px;
  margin-right: 25px;
  cursor: pointer;
}

.order_nav_ht h2{
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin: 0;
}

.order_nav h2{
  padding-right: 40px;
  font-size: 14px;
  color: #666;
}

.order_nav_ht{
  padding: 20px 30px;
}


.pay_tips .icon-xuanzhong{
  color: #ea1a56;
  margin-right: 4px;
}

.iconfont{
  font-family: "iconfont",fantasy !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}


.icon-xuanzhong:before{
  content: "\e61b";
}

.agree{
  cursor: pointer;
}


.order_submit_nav .go_pay{
  font-size: 14px;
  padding: 10px 30px;
  margin: -35px 0 0 10px;
  border-radius: 5px;
  display: inline-block;
  float: right;

}

.pay_tips{
  display: inline-block;
  font-size: 12px;
  line-height: 34px;
}



.clear{
  clear: both;
}

.order_submit_nav{
  background: #fff8fa;
  border: 1px solid #ff6ea0;
  border-radius: 5px;
  position: relative;
  padding: 20px 15px;
}


.address b{
  font-size: 12px;
  color: #666;
  margin-top: 16px;
  margin-right: 10px;
  display: inline-block;
}


.pay_co{
  color: #999;
}

.pay_tips{
  display: inline-block;
  font-size: 12px;
  line-height: 34px;
  width: 800px;
}

.address a{
  color: #3e91e5;
  background: #f3fbff;
  padding: 9px 24px;
  border-radius: 8px;
  margin: 0 20px;
  cursor: pointer;
  display: inline-block;
  box-shadow: 3px 3px 6px #d7e8fa;
}

.address{
  font-size: 14px;
  margin: 35px 0 10px;
}

a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

.select_sex{
  display: inline-block;
  color: #999;
  cursor: pointer;
}

.meg-person .user_num{
  margin-left: 0;
  width: 132px;
}

.meg-person .selection{
  width: 104px;
  border: 1px solid #eee;
  background-color: #fff;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  margin-right: 4px;
  padding-left: 10px;
  outline: 0;
}

.fr{
  float: right;
}

.order_nav h2 span{
  font-size: 12px;
  color: #999;
  cursor: pointer;
}


.clearall{
  color: #3e91e5;
  margin-left: 20px;
  font-size: 12px;
  cursor: pointer;
  font-style: normal;
}

.visitor .span2{
  display: inline-block;
  color: #ea1a56;
  background: #fff;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  line-height: 18px;
  height: 18px;
  padding: 1px 7px;
  margin-left: -6px;
  border: 1px solid #ea1a56;
}

.visitor .span1{
  display: inline-block;
  color: #fff;
  background: #ea1a56;
  border-radius: 4px 0 0 4px;
  font-size: 12px;
  line-height: 18px;
  height: 18px;
  padding: 1px 7px;
  border: 1px solid #ea1a56;
}


.visitor b{
  display: inline-block;
}

.order_pay_nav h2{
  margin-left: -3px;
  margin-bottom: 10px;
  margin-top: 25px;

}

.order_nav h2{
  padding-right: 40px;
  font-size: 14px;
  color: #666;
}

.linkman li {
  display: inline-block;
  margin: 6px 20px;
  cursor: pointer;
  position: relative;
  padding-top: 1px;
}


.linkman {
  border: 1px #ccc dashed;
  color: #666;
  font-size: 12px;
  width: 95%;
  margin: 20px 0;
  border-radius: 80px;
  padding: 0;
}


.meg-person textarea {
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #eee;
  width: 300px;
  padding: 10px;
  outline: 0;
  resize: none;
}


.tel {
  line-height: 36px;
  color: #666;
  margin-bottom: 14px;
}

.meg-person input {
  background-color: #fff;
  color: #333;
  border-radius: 5px;
  border: 1px solid #eee;
  width: 240px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  vertical-align: middle;
}

input {
  outline: 0;
}

.meg-person b {
  display: inline-block;
  width: 95px;
  margin-right: 30px;
  color: #666;
  position: relative;
}


.meg-person {
  color: #666;
  margin-bottom: 14px;
}


.order_nav b{
  font-weight: 400;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  line-height: 1;
}

.order_nav h1 span {
  font-size: 12px;
  color: #999;
  padding-left: 20px;
  margin-right: 40px;
  font-weight: 400;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  line-height: 1;
}



.order_pay_nav {
  margin: 30px auto auto 50px;
  font-size: 12px;
}

.order_nav h1 {
  font-size: 16px;
  border-left: 3px solid #ff4d63;
  padding-left: 20px;
  overflow: hidden;
}

.order_nav {
  overflow: visible;
  background: #fff;
  border-radius: 5px;
  margin: 15px 0;
  font-weight: 400;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  line-height: 1;
  padding: 15px;
}


.supplement_text span {
  width: 20%;
  float: left;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
}

.supplement_text {
  list-style: none;
  border: 2px solid #f9f9f9;
  background: #fff;
  height: 40px;
}


.supplement_tit span {
  width: 20%;
  float: left;
  text-align: center;
  line-height: 40px;
  color: #666;
  font-size: 12px;

}

.supplement_tit {
  list-style: none;
  height: 40px;
  background: #f9f9f9;
}

.supplement {
  width: 100%;
  display: block;
  margin-top: 10px;
  padding: 0;
}


.container h3 {
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 15px;
  font-weight: 400;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.mesg_box span {
  margin-right: 40px;
}


.mesg_box {
  font-weight: 400;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  line-height: 1;
}

.reserve_l fl{
  float: left;
  width: 830px;
}

.main-container {
  padding: 26px;
  font-weight: 600;
  margin-top: 20px;
  background: #fff;
}

.wrap{
  float: left;
}
</style>